<template>
  <div class="login-background">
    <div class="logo">
      <img src="@/assets/icons/gwlogob.png" alt="">
    </div>
    <div class="login-con">
      <div class="login">
        <div class="right">
          <el-form ref="loginForms" :model="loginForm" :rules="rules" class="login-form">
            <h3 class="title">{{ setting.title }}</h3>
            <el-form-item prop="username">
              <el-input :prefix-icon="User" size="large" v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" :prefix-icon="Lock" size="large" v-model="loginForm.password"
                show-password></el-input>
            </el-form-item>
            <div style="display: flex; justify-content: space-between">
              <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
            </div>
            <el-form-item style="width: 100%">
              <el-button :loading="loading" size="default" type="primary"
                style="width: 100%;height: 44px;border: none;background-color: #00b199;margin-top: 5%;"
                @click.prevent="login">
                <span v-if="!loading" style="letter-spacing: 10px;">登陆</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!--  底部  -->
      <div class="el-login-footer">
        <div v-html="setting.copyright"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { User, Lock } from '@element-plus/icons-vue';
import { reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElNotification } from 'element-plus';
import setting from '@/setting'
//引入获取当前时间的函数
//引入用户相关的小仓库
import { useUserStore } from "@/store/modules/user";
let useStore = useUserStore();
//获取el-form组件
let loginForms = ref();
//获取路由器
let $router = useRouter();
//路由对象
let $route = useRoute();
//定义变量控制按钮加载效果
let loading = ref(false);
//收集账号与密码的数据
let loginForm = reactive({
  username: 'admin',
  password: 'atguigu123',
  rememberMe: false,
});
//登录按钮回调
const login = async () => {
  //保证全部表单相校验通过再发请求
  await loginForms.value.validate();
  //加载效果:开始加载
  loading.value = true;
  //点击登录按钮以后干什么?
  //通知仓库发登录请求
  //请求成功->首页展示数据的地方
  //请求失败->弹出登录失败信息
  try {
    //保证登录成功
    await useStore.userLogin(loginForm);
    //编程式导航跳转到展示数据首页
    //判断登录的时候,路由路径当中是否有query参数，如果有就往query参数跳转，没有跳转到首页
    let redirect: any = $route.query.redirect;
    $router.push({ path: redirect || '/' });
    //登录成功提示信息 
    ElNotification({
      type: 'success',
      message: '欢迎回来',
      title: `登陆成功！`
    });
    //登录成功加载效果也消失
    loading.value = false;
  } catch (error) {
    //登录失败加载效果消息
    loading.value = false;
    //登录失败的提示信息
    ElNotification({
      type: 'error',
      message: (<Error>error).message
    })
  }
}
//自定义校验规则函数
const validatorUserName = (_rule: any, value: any, callback: any) => {
  //rule:即为校验规则对象
  //value:即为表单元素文本内容
  //函数:如果符合条件callBack放行通过即为
  //如果不符合条件callBack方法,注入错误提示信息
  if (value.length >= 5) {  
    callback();
  } else {
    callback(new Error('Account length should be at least five digits'));
  }
}

// const validatorPassword = (rule: any, value: any, callback: any) => {
//   if (value.length >= 6) {
//     callback();
//   } else {
//     callback(new Error('密码长度至少六位'));
//   }
// }

//定义表单校验需要配置对象
const rules = {
  //规则对象属性:
  //required,代表这个字段务必要校验的
  //min:文本长度至少多少位
  //max:文本长度最多多少位
  //message:错误的提示信息
  //trigger:触发校验表单的时机 change->文本发生变化触发校验,
  // blur:失去焦点的时候触发校验规则
  username: [
    // { required: true, min: 5, max: 10, message: 'Account length should be at least five digits', trigger: 'change' }
    { trigger: 'change', validator: validatorUserName }
  ],
  password: [
    { required: true, min: 6, max: 10, message: 'Password length must be at least 6 digits', trigger: 'change' }
    // { trigger: 'change', validator: validatorPassword }
  ]
}
</script>
<style scoped>
::v-deep(.el-input__wrapper) {
  border: none;
  background-color: transparent !important;
}
</style>
<style lang="scss" scoped>
.login-background {
  background-image: url('@/assets/images/wan.png');
  background-size: 100% 100%;
  height: 100vh;
  user-select: none;
  position: relative;

  .logo {
    position: absolute;
    left: 4%;
    top: 4%;
    width: 100px;
    height: 100px;
    z-index: 99;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .login-con {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // backdrop-filter: blur(5px);

    .login {
      margin-top: 3%;
      width: 35%;
      height: 60%;
      background-attachment: fixed;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;

      .right {
        flex: 6.5;
        height: 100%;
        padding: 20px 40px;
        background-color: hsla(0, 0%, 100%, 0.3);
        height: 100%;
        position: relative;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;

        .login-form {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .title {
            margin: 0px auto 30px auto;
            text-align: center;
            font-size: 22px;
            background-color: #246fdd;
            color: transparent;
            background-clip: text;
            -webkit-background-clip: text;

          }

          .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 0px;
          }
        }

        .login-tip {
          font-size: 13px;
          text-align: center;
          color: #bfbfbf;
        }

        .login-code {
          width: 33%;
          height: 40px;
          float: right;

          img {
            width: 100%;
            cursor: pointer;
            vertical-align: middle;
          }
        }
      }
    }



    .el-login-footer {
      height: 40px;
      line-height: 40px;
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #fff;
      font-family: Arial;
      font-size: 12px;
      letter-spacing: 1px;
    }

    .login-code-img {
      height: 40px;
      padding-left: 12px;
    }

    .langSet {
      position: absolute;
      right: 20px;
      top: 10px;
    }

  }
}
</style>